<template>
  <div class="mpressreleasrdetail">
    <div class="mbigdiv">
      <div  class="mtitleh textcenter mpad mbottom">
        <label class="titletext">{{pressReleasDetail.title}}</label>
      </div>
      <div  class="textcenter hig mt">
        <label class="littlesize">
          公告来源：{{pressReleasDetail.title}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          发表于{{pressReleasDetail.createDate}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          阅读&nbsp;|&nbsp;{{pressReleasDetail.readNum}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          点赞&nbsp;|&nbsp;{{pressReleasDetail.likeNum}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          评论&nbsp;|&nbsp;{{pressReleasDetail.effectiveCommentNum}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </label>
      </div>
      <div >
        <label id="mlabel" class="ql-editor"></label>
        <div v-bind:class="{hideDiv:fileList.length == 0}" >
        <div style="width: 80px;float: left">附件列表：</div>
        <div style="margin-left: 80px">
          <template v-for="(item,index) in fileList">
            <a v-bind:href="item.url" :key="index">{{item.name}}</a>&nbsp;&nbsp;&nbsp;
          </template>
        </div>
        </div>
      </div>
      <div  class="hei mar" style="margin-bottom: 40px">
        <el-input type="textarea" v-model="comment.commentContent" :rows="2" resize="none"></el-input>
        <div style="float: right">
          <el-button type="primary" @click="addComment"  class="mar fr">发表评论</el-button>
        </div>
        <div  style="width: 80px;float: right">
          <template ><div >
           <label v-if="buttonFlag == false" > <div style="float: left"><img src="../../assets/like.png"  class="mar" height="25px" width="25px" @click="likeAction"></div><div class="likenum"><label >{{pressReleasDetail.likeNum}}</label></div></label>
            <label v-if="buttonFlag == true" ><div style="float: left"><img src="../../assets/UnLike.png"  class="mar" height="25px" width="25px"></div><div class="likenum"><label >{{pressReleasDetail.likeNum}}</label></div></label>
          </div></template>
        </div>

      </div>
      <el-card>
        <label v-if="commentList.length == 0">
          <div class="textcenter">暂无评论</div>
        </label>
        <div class="whiteb">
          <template v-for="(o,index) in commentList">
            <div class="mh" :key="index">
              <div class="mheight mbor mbla">
                <div class="textcenter mhe mw"><img src="../../assets/headPicture.png" class="mar" height="25px"
                                                    width="25px"></div>
                <div>
                  <div class="hig namept">
                    <label>{{o.userName}}</label>
                  </div>
                  <div class="mcomment">{{o.commentContent}}</div>
                </div>
              </div>
              <div class="hig mbla pt" >
                <div class="mhd" >
                  <label class="mla">评论时间：{{o.commentTime}}</label><br>

                  <div>
                    <div v-if="o.children.length !== 0" class="child">
                      <div v-for="(item,index) in o.children" class="chil" :key="index">
                        <div class="grid-content" style="margin: 5px">
                          <label style="color: blue">{{item.userName}}</label>&nbsp;&nbsp;&nbsp;{{item.commentTime}}&nbsp;回复<br>
                          {{item.commentContent}}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

              </div>
            </div>
          </template>
        </div>
        <div style="cursor: pointer;" class="textcenter" @click="addCount"
             v-bind:class="{hideDiv: commentList.length < 1}">更多评论信息∨
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import {userAaddNewComment, getCurrentPressRelease, getCommentsByStatus, addLike, findLikeOrUnlike, searchPressReleaseFileByPressReleaseId} from '../../api/v3/PressRelease';
export default {
  data () {
    return {
      token: this.$store.state.token,
      id: null,
      pressReleasDetail: {},
      commentList: [],
      fileList: [],
      comment: {
        commentContent: '',
        userId: '',
        pressReleaseId: '',
        commentTime: ''
      },
      commentUserIdList: [],
      page: 1,
      size: 3,
      count: 1,
      pageSize: 3,
      flag: false,
      buttonFlag: false,
      hereContent: ''
    };
  },
  methods: {
    // 点击加载更多
    addCount () {
      this.count = this.count + 1;
      this.size = this.count * this.pageSize;
      this.getPressReleaseCommentList();
    },
    // 查询本新闻详情
    getPressReleaseDetail (id) {
      this.refreshPage();
      getCurrentPressRelease(id).then((res) => {
        if (res.data) {
          this.pressReleasDetail = res.data;
          if (this.pressReleasDetail.content !== null) {
            document.getElementById('mlabel').innerHTML = this.pressReleasDetail.content;
          }
        }
        searchPressReleaseFileByPressReleaseId(id).then((res) => {
          if (res.data) {
            this.fileList = res.data;
          }
        });
      });
    },
    // 查询本条新闻的所有评论
    getPressReleaseCommentList () {
      getCommentsByStatus({
        id: this.id,
        page: this.page - 1,
        size: this.size
      }).then((res) => {
        if (res.data) {
          this.commentList = res.data;
          this.commentUserIdList = this.commentList.map(o => o.userId);
        }
      });
    },
    // 点赞
    likeAction () {
      addLike(this.id).then((res) => {
        if (res.data) {
          // this.$router.push('/marketing/pressReleaseDetail/' + this.id); // 跳转到詳情页面
          this.$message({
            message: '点赞成功',
            type: 'success'
          });
        }
        this.likeOrUnlike(this.id);
        this.getPressReleaseDetail(this.id);
      });
    },
    // 判断当前用户是否点赞过本条新闻
    likeOrUnlike (id) {
      findLikeOrUnlike(id).then((res) => {
        if (res.data) {
          // 点赞过
          this.buttonFlag = true;
          this.getPressReleaseDetail(this.id);
        } else {
          // 没点赞过
          this.buttonFlag = false;
        }
      });
    },
    // 添加一条评论
    addComment () {
      this.comment.pressReleaseId = this.id;
      if (this.comment.commentContent === null || this.comment.commentContent === '') {
        this.$message('评论内容不能为空!');
        return;
      }
      userAaddNewComment(this.comment).then((res) => {
        if (res.data) {
          this.$message({
            type: 'success',
            message: '评论成功'
          });
        }
        this.comment.commentContent = '';
        this.getPressReleaseCommentList(this.id);
        this.getPressReleaseDetail(this.id);
      });
    },
    refreshPage: function () {
      this.$router.replace('/marketing/pressReleaseDetail/' + this.id);
    },
    fetchData () {
      this.id = this.$route.params.id;
      this.$store.commit('getUnreadCount');
      this.getPressReleaseDetail(this.id);
      this.getPressReleaseCommentList();
      this.likeOrUnlike(this.id);
    }
  },
  watch: {
    '$route': 'fetchData'
  },
  mounted () {
    this.id = this.$route.params.id;
    this.$store.commit('getUnreadCount');
    this.getPressReleaseDetail(this.id);
    this.getPressReleaseCommentList();
    this.likeOrUnlike(this.id);
  }
};
</script>
<style lang="less">
  .mpressreleasrdetail {
    .hideDiv {
      display: none;
    }
    .mbigdiv {
      margin: 0 auto;
      width: 80%;
    }
    .mtitleh {
      height: 50px;
    }
    .textcenter {
      text-align: center;
    }
    .mpad {
      padding-top: 20px;
    }
    .mbottom {
      border-bottom: 2px solid #DFE6EC;
    }
    .titletext {
      font-weight: bold;
      font-size: 18px;
    }
    .hig {
      min-height: 30px;
      color: #666666;
      font-size: 12px;
    }
    .littlesize {
      font-size: 8px;
    }
    .hei {
      height: 100px;
    }
    .mar {
      margin-top: 10px;
    }
    .fr {
      float: right;
    }
    .whiteb {
      border: 10px solid yellowgreen;
    }
    .mh {
      min-height: 90px;
    }
    .mheight {
      min-height: 40px;
    }
    .mbor {
      border-bottom: 1px solid #EEEFF3;
    }
    .mbla {
      background-color: #F5F6FA;
    }
    .mhe {
      height: 45px;
    }
    .mw {
      width: 40px;
      float: left;
    }
    .pt {
      padding-top: 10px;
    }
    .namept {
      padding-top: 12px;
    }
    .mla {
      margin-left: 40px;
    }
    .mbutton {
      disabled: disabled;
    }
    .mcomment {
      min-height: 10px;
      margin-left: 40px;
      padding-right: 8px ;
    }
    .likenum {
      float:left;
      margin-top: 13px;
    }
    .mt {
      margin-top: 5px;
    }

  .hideDiv {
    display: none;
  }

  .mbigdiv {
    margin: 0 auto;
    width: 80%;
  }

  .mtitleh {
    height: 50px;
  }

  .textcenter {
    text-align: center;
  }

  .mpad {
    padding-top: 20px;
  }

  .mbottom {
    border-bottom: 2px solid #DFE6EC;
  }

  .titletext {
    font-weight: bold;
    font-size: 18px;
  }

  .hig {
    min-height: 30px;
    color: #666666;
    font-size: 12px;
  }

  .littlesize {
    font-size: 8px;
  }

  .hei {
    height: 100px;
  }

  .mar {
    margin-top: 10px;
  }

  .fr {
    float: right;
  }

  .whiteb {
    border: 10px solid white;
  }

  .mh {
    min-height: 90px;
  }

  .mheight {
    min-height: 40px;
  }

  .mbor {
    border-bottom: 1px solid #EEEFF3;
  }

  .mbla {
    background-color: #F5F6FA;
  }

  .mhe {
    height: 45px;
  }

  .mw {
    width: 40px;
    float: left;
  }

  .pt {
    padding-top: 10px;
  }

  .namept {
    padding-top: 12px;
  }

  .mla {
    margin-left: 40px;
  }

  .mbutton {
    disabled: disabled;
  }

  .mcomment {
    min-height: 10px;
    margin-left: 40px;
    padding-right: 8px;
  }

  .likenum {
    float: left;
    margin-top: 13px;
  }

  .mt {
    margin-top: 5px;
  }

  .displayClss {
    display: none;
  }
  .mhd {
    margin-bottom: 10px;min-height: 35px;
  }
  .mbt {
    float: right;margin-right: 20px;
  }
  .rev {
    float: right;margin-right: 5px
  }
  .child {
    background-color: #E4E4E4;
    margin-left: 40px;
    /*min-height: 50px;*/
    margin-right: 5px;
    margin-bottom: 10px;
    border-bottom: 10px solid #F5F6FA
  }
  .chil {
    min-height: 40px;
    padding: 5px;
    border-bottom: 1px solid #D7D7D7
  }
  .cont {
    margin-top: 5px;
    margin-left: 40px;
    min-height: 100px;
  }
  }

</style>
